<template>
  <view class="home">
    <!-- 顶部搜索部分 -->
    <searchLink></searchLink>
    <!-- 轮播图部分 -->
    <view class="swiper1">
      <swiper
        class="swiper"
        indicator-dots="indicatorDots"
        :autoplay="true"
        :interval="1000"
        circular="true"
        :duration="duration"
        indicator-color="#ccc"
        indicator-active-color="#fff"
      >
        <block v-for="(item, index) in swiperImage" :key="index">
          <swiper-item>
            <image :src="item.image_src"></image>
          </swiper-item>
        </block>
      </swiper>
    </view>
    <!-- 分类部分 -->
    <view class="nav">
      <image v-for="item in navImage" :src="item.image_src"></image>
    </view>
    <!-- 楼层部分 -->
    <view class="floor">
      <view class="floor-item" v-for="(item, index) in floordata" :key="index">
        <image :src="item.floor_title.image_src" mode=""></image>
        <view class="product-list">
          <image :src="item.product_list[0].image_src"></image>
          <view class="right">
            <block
              v-for="(subitem, subindex) in item.product_list"
              :key="subindex"
            >
              <image v-if="subindex" :src="subitem.image_src"></image>
            </block>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
// 引入SearchLink.vue
import searchLink from '@/components/searchLink'

import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue'
import uniGrid from '@/components/uni-grid/uni-grid.vue'
import uniGridItem from '@/components/uni-grid-item/uni-grid-item.vue'

export default {
  components: {
    uniSearchBar,
    uniGrid,
    uniGridItem,
    //引入
    searchLink
  },
  data () {
    return {
      // 轮播图数据
      swiperImage: [],
      // 导航栏数据
      navImage: [],
      floordata: []
    }
  },
  onLoad () {
    this.getSwiperImage()
    this.getNavImage()
    this.getFloorData()
  },
  methods: {
    // 调用公共方法
    async getSwiperImage () {
      this.swiperImage = await this.$request({
        url: '/api/public/v1/home/swiperdata'
      })
    },

    // 2、请求导航栏图片
    async getNavImage () {
      // 调用公共方法
      this.navImage = await this.$request({
        url: '/api/public/v1/home/catitems'
      })
    },
    async getFloorData () {
      // 调用公共方法
      this.floordata = await this.$request({
        url: '/api/public/v1/home/floordata'
      })
    }
  }
}
</script>

<style lang="less" scoped>
.home {
  box-sizing: border-box;
  // 轮播图部分
  .swiper {
    height: 340rpx;

    image {
      width: 100%;
      height: 340rpx;
    }
  }

  // 导航栏
  .nav {
    display: flex;
    height: 194rpx;
    align-items: center;
    justify-content: space-around;

    image {
      width: 128rpx;
      height: 140rpx;
    }
  }

  // 楼层部分
  .floor-item {
    padding: 20rpx 17rpx;

    > image {
      height: 88rpx;
    }

    .product-list {
      display: flex;

      > image {
        width: 232rpx;
        height: 386rpx;
      }

      .right {
        flex: 1;

        image {
          width: 232rpx;
          height: 188rpx;
          margin: 0 0 10rpx 10rpx;
        }
      }
    }
  }
}
</style>
